<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>拼多多现金任务</view>
				</view>
				<view class="rule">任务规则</view>
			</view>
		</view>
		<view class="bg-top">
		</view>
		<view class="rela">
			<view class="panel flex j-center a-center">
				<view class="flex col j-center a-center">
					<view class="line1">25/50</view>
					<view class="line2">2.0km可接</view>
					<view class="line3">剩余数量</view>
				</view>
				<u-line color="#fff" length="32" direction="col" style="margin: 0 100rpx;"></u-line>
				<view class="flex col j-center a-center">
					<view class="line1 flex a-end">
						<view class="num">200</view>
						<view class="coin">金币</view>
					</view>
					<view class="line2">距离1.1km</view>
					<view class="line3">任务奖励</view>
				</view>
			</view>
			<view class="block">
				<view class="flex a-center">
					<u-icon name="info-circle-fill" size="48" color="#00D86A"></u-icon>
					<view class="info">请参照以下步骤完成任务</view>
				</view>
				<view class="title-name">1.点击复制口令，打开开始助力</view>
				<view class="link">链接：www.pdd.com</view>
				<view class="code">
					<image class="image"></image>
				</view>
				<view class="flex j-between a-center">
					<view class="flex j-center a-center copy">
						<view>复制口令</view>
					</view>
					<view class="flex j-center a-center down">
						<view>下载二维码</view>
					</view>
				</view>
				<view class="title-name">2.完成助力后截图保存，按照示例和要求上传截图</view>
				<view class="flex a-center j-between">
					<view class="eg">
						<image class="image" src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
					</view>
					<view class="eg flex col j-center a-center upload">
						<u-icon name="plus-circle" size="63"></u-icon>
						<view>上传验证图片</view>
					</view>
				</view>
			</view>
			<view style="height: 150rpx;width: 100%;"></view>
			<view class="fixed opt flex j-between a-center">
				<view class="flex a-center">
					<view class="new">
						<u-icon name="trash" color="#999" size="36"></u-icon>
					</view>
					<view>放弃任务</view>
				</view>
				<view class="get flex j-center a-center">
					<view>提交任务</view>
				</view>
			</view>
			<view class="fixed opt flex j-end a-center">
				<view class="get flex j-center a-center" @tap="show=true">
					<view>申请仲裁</view>
				</view>
			</view>
			<view class="fixed opt status flex j-center a-center" style="background-color: #00D86A;">
				<view>已完成</view>
			</view>
			<view class="fixed opt status flex j-center a-center" style="background-color: #246FDD;">
				<view>审核中</view>
			</view>
			<view class="fixed opt status flex j-center a-center" style="background-color: #999999;">
				<view>已过期</view>
			</view>
			<u-popup v-model="show" border-radius="16" mode="bottom">
				<view class="pop rela">
					<view class="close abso">
						<u-icon name="close-circle" size="36" color="#999"></u-icon>
					</view>
					<view class="flex j-center title">仲裁申请</view>
					<view class="tip">本人对此审核结果有异议</view>
					<view class="body">为维护接单人的权益，接单人可申请订单仲裁，平台将根据任务规则及任务要求，重新对此订单进行人工审核，仲裁审核将会在12个小时内完成，审核结果请留意消息通知</view>
					<view class="tip2">注：未通过任务只能申请一次仲裁申请，再次申请无效</view>
					<view class="flex a-center check" @tap="agree = !agree">
						<view v-if="!agree" class="none"></view>
						<view v-if="agree" class="checked flex j-center a-center">
							<u-icon name="checkbox-mark" size="10" color="#FFF"></u-icon>
						</view>
						<view class="tj">本人已阅读任务规则，及确认上传的验证图无误</view>
					</view>
					<view class="apply flex j-center a-center">
						<view>确定申请</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				agree:false,
			}
		},
		methods: {
			top(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:pdt+'px'}
			},
			ctop(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+44)+'px'}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #FFF;
	background: #246FDD;
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 128rpx;}
}
.bg-top{position: absolute;top: 0;right: 0;left: 0;height: 504rpx;background: #246FDD;}
.panel{color: #FFF;margin-top: 66rpx;
	.line1{font-size: 36rpx;font-weight: bold;
		.coin{font-size: 24rpx;}
	}
	.line2,.line3{font-size: 24rpx;margin-top: 24rpx;}
}
.block{padding: 34rpx 24rpx 48rpx;background-color: #FFF;border-radius: 16rpx;margin-top: 48rpx;color: #333;
	.info{color: #333;font-size: 32rpx;font-weight: bold;margin-left: 24rpx;}
	.title-name{font-size: 28rpx;margin-top: 48rpx;}
	.link{font-size: 28rpx;margin-top: 24rpx}
	.code{width: 240rpx;height: 240rpx;margin: 48rpx auto 0;background-color: #333;}
	.copy{margin-top:48rpx;width: 316rpx;height: 88rpx;border-radius: 200rpx;background-color: #00D86A;color: #FFF;font-size: 32rpx;}
	.down{margin-top:48rpx;width: 316rpx;height: 88rpx;border-radius: 200rpx;background-color: #246FDD;color: #FFF;font-size: 32rpx;}
	.eg{width: 280rpx;height: 280rpx;border-radius: 16rpx;overflow: hidden;margin:48rpx 24rpx 0;}
	.upload{background-color: #F9F9F9;color: #999;font-size: 24rpx;}
}
.opt{height: 128rpx;background-color: #FFF;left: 0;right: 0;bottom: 0;font-size: 28rpx;color: #999999;padding: 0 24rpx;
	.new{width: 36rpx;height: 36rpx;margin-right: 24rpx;}
	.get{width: 320rpx;height: 88rpx;border-radius: 16rpx;background-color: #246FDD;color: #FFF;font-size: 32rpx;}
}
.status{font-size: 36rpx;font-weight: bold;color: #FFF;}
.pop{padding: 36rpx 24rpx;min-height: 100rpx;
	.close{top:28rpx;right: 28rpx;z-index: 20;width: 36rpx;height: 36rpx;}
	.title{font-size: 36rpx;color: #333;font-weight: bold;}
	.tip{color: #999;font-size: 24rpx;text-align: center;margin-top: 24rpx;}
	.body{color: #333;font-size: 28rpx;margin: 72rpx 30rpx;}
	.tip2{color: #999;font-size: 24rpx;margin: 0 30rpx;}
	.check{margin-top: 128rpx;
		.none{width: 32rpx;height: 32rpx;border-radius: 100%;border:2rpx solid #999;}
		.checked{width: 32rpx;height: 32rpx;border-radius: 100%;background-color: #2979FF;}
		.tj{font-size: 24rpx;color: #999;margin-left:20rpx;}
	}
	.apply{color: #FFF;font-size: 32rpx;background-color: #246FDD;border-radius: 16rpx;margin-top: 32rpx;height: 88rpx;}
}
</style>
